<template>
    <div class="login" >
        <el-card class="box-card">
        <el-form>
            <el-form-item label="登录后台管理"></el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="userName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input show-password v-model="passWord" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="login"  type="primary">登录</el-button>
            </el-form-item>
        </el-form>
        </el-card>
    </div>
</template>
<script>
import { Message } from 'element-ui';
export default{
    name:'Login',
    data(){
        return{
            userName:'',
            passWord:''
        }
    },
  mounted() {
      if (this.$store.state.userToken)
      {
        this.$message.success('已经登录')
      }
  },
  methods:{
      login(){
        let postData = {
          UserName: this.userName,
            PassWord: this.passWord,
            Authority: "admin"

        }
        let url = 'http://shilezhi.club:8082/Api/User/UserLogin'
        this.axios.defaults.withCredentials = true;
        this.axios.defaults.headers.post["Content-Type"] =
            "application/json;charset=utf-8";
        this.axios.post(url,JSON.stringify(postData)).then(
            response=>{
              let code = response.data.code
              let token = response.data.token
              if (code === 'ok')
              {
                this.$store.commit('setUserToken',token)
                this.$store.commit('showAll')
                this.$router.push('/newUser')
                this.$message.success('登陆成功')

              }
              else {
                console.log("登陆失败")
                this.$message.warning('密码或账号错误');
              }
            },
            err=>{
              console.log(err)
            }
        )
      }
  }
}
    
</script>
<style scoped>
.login
{
    
    /* max-width: 50rem; */
    

    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 3.75rem);

    

}
.el-form{
    width: 20rem;
}


</style>